<script setup>
// 导入OpenLayers核心组件
import {Feature, View} from "ol"; // Feature: 地图要素，View: 视图控制
import {Map} from "ol"; // Map: 地图主类

// 导入Vue生命周期钩子
import {onMounted} from "vue"; // 组件挂载时执行

// 导入天地图相关工具函数
import getTDT from '@/js/UseTDT2304.js' // 获取天地图底图
import {registerCGCS2000} from '@/js/UseTDT2304.js' // 注册CGCS2000坐标系

// 导入矢量图层相关组件
import VectorLayer from "ol/layer/Vector.js"; // 矢量图层
import VectorSource from "ol/source/Vector.js"; // 矢量数据源

// 导入格式解析和WFS服务相关组件
import {GeoJSON, WFS} from "ol/format.js"; // GeoJSON: 数据格式解析，WFS: Web要素服务

// 导入交互工具
import {Draw} from "ol/interaction.js"; // Draw: 绘制交互工具

// 声明地图实例变量
let map

// 定义几何类型与GeoServer图层名称的映射关系
// 'point'对应城市点图层，'line'对应铁路线图层，'polygon'对应境界面图层
const typeMap = {
  'point':'city',
  'line':'rai_4m',
  'polygon':'bou2_4p'
}

// 创建矢量图层实例，用于显示和编辑几何要素
const vectorLayer = new VectorLayer()

// 初始化地图函数
const initMap =()=>{
  // 注册CGCS2000坐标系（中国国家大地坐标系）
  registerCGCS2000()
  
  // 创建地图实例
  map = new Map({
    target: 'map', // 地图容器的DOM元素ID
    layers:  getTDT("矢量底图","经纬度投影",'d06c497b107f57ebd6a0f8fbf967292d'), // 添加天地图矢量底图
    view: new View({
      center: [116, 30], // 地图中心点坐标（北京附近）
      zoom: 3, // 初始缩放级别
      projection: 'EPSG:4490' // 使用CGCS2000坐标系
    })
  })
}

// 组件挂载完成后初始化地图
onMounted(initMap)
// 声明绘制交互实例变量
let draw

// 添加地理要素的核心函数
// 参数type: 要素类型，可选值为'point'(点)、'line'(线)、'polygon'(面)
const addFeature = (type)=>{
  // 清除之前的数据源
  vectorLayer.setSource(null)
  
  // 创建新的矢量数据源，从GeoServer加载指定类型的要素
  const vectorSource = new VectorSource({
    format: new GeoJSON(), // 使用GeoJSON格式解析数据
    url: `http://localhost:8080/geoserver/webgis2304/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=webgis2304%3A${typeMap[type]}&outputFormat=application%2Fjson`,
  })
  
  // 设置图层数据源
  vectorLayer.setSource(vectorSource)
  
  // 如果矢量图层还未添加到地图中，则添加
  if(!map.getLayers().getArray().includes(vectorLayer)){
    map.addLayer(vectorLayer)
  }

  // 如果已有绘制交互，则移除
  if(map.getInteractions().getArray().includes(draw)){
    map.removeInteraction(draw)
  }

  // 监听数据加载完成事件
  vectorSource.once('featuresloadend',()=>{
    // 获取第一个要素的几何类型，用于确定绘制类型
    const geometryType = vectorSource.getFeatures()[0].getGeometry().getType()
    console.log('加载的几何类型:', geometryType)
    
    // 创建绘制交互工具
    draw = new Draw({
      source: vectorSource, // 绘制的要素将添加到此数据源
      type: geometryType // 绘制的几何类型
    })
    
    // 添加绘制交互到地图
    map.addInteraction(draw)

    // 监听绘制完成事件
    draw.on('drawend',(evt)=>{
      // 克隆新绘制的几何图形
      const newgeom = evt.feature.getGeometry().clone()
      
      // 创建新的要素对象
      const newFeature = new Feature()
      newFeature.setGeometryName('geom') // 设置几何字段名称
      newFeature.setGeometry(newgeom) // 设置几何图形

      // 创建WFS事务，用于添加新要素
      const wfsTranaction = new WFS().writeTransaction(
        [newFeature], // 要添加的要素数组
        null, // 要更新的要素数组（为空）
        null, // 要删除的要素数组（为空）
        {
          featureNS: 'www.webgis2304.com', // 命名空间
          featurePrefix: 'webgis2304', // 要素前缀
          featureType: typeMap[type], // 要素类型名称
        }
      )
      
      // 将事务对象序列化为XML字符串
      const wfsString = new XMLSerializer().serializeToString(wfsTranaction)

      // 创建XMLHttpRequest对象发送请求
      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://localhost:8080/geoserver/ne/ows?service=WFS', true)
      xhr.setRequestHeader('Content-Type', 'text/xml') // 设置请求头
      xhr.send(wfsString) // 发送请求

      // 监听请求状态变化
      xhr.onreadystatechange = function (){
        // 请求成功完成时
        if(xhr.status === 200 && xhr.readyState === 4){
          console.log('成功响应:', xhr.responseText);
        }
      }
    })
  })


 /* const draw = new Draw({
    source: vectorSource,
    type: 'Point'
  })
  map.addInteraction(draw)

  draw.on("drawend",(evt)=>{
    const newgeom = evt.feature.getGeometry().clone()
    const newFeature = new Feature()
    newFeature.setGeometryName('geom')
    newFeature.set('name',"东京")
    newFeature.setGeometry(newgeom)

    const wfsTranaction = new WFS().writeTransaction([newFeature],null,null,{
      featureNS:'www.webgis2304.com',
      featurePrefix:'webgis2304',
      featureType:'city',
    })
    const wfsString = new XMLSerializer().serializeToString(wfsTranaction)

    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://localhost:8080/geoserver/webgis2304/ows?service=WFS', true)
    xhr.setRequestHeader('Content-Type', 'text/xml')
    xhr.send(wfsString)

    xhr.onreadystatechange = function (){
      if(xhr.status === 200 && xhr.readyState === 4){
        console.log('成功响应:', xhr.responseText);
      }
    }
  })*/
}

</script>

<template>
  <!-- 工具栏容器 -->
  <div class="tools">
    <!-- 添加点按钮 -->
    <button @click="addFeature('point')">添加点</button>
    <!-- 添加线按钮 -->
    <button @click="addFeature('line')">添加线</button>
    <!-- 添加面按钮 -->
    <button @click="addFeature('polygon')">添加面</button>
  </div>
  <!-- 地图容器 -->
  <div id="map"></div>
</template>

<style scoped>
/* 地图容器样式 */
#map{
  width: 100%;
  height: 700px;
}

/* 工具栏样式 */
.tools{
  position: absolute; /* 绝对定位 */
  top:10px;
  left: 35px;
  z-index: 2; /* 置于地图之上 */
  opacity: 0.5; /* 半透明效果 */
}

/* 按钮样式 */
.tools button{
  width: 75px;
  height: 30px;
}
</style>